<template>
    <div class="alterPage">
        <page-header backgroundColor='#ffffff' @toLastPage="toLastPage"></page-header>
        <div class="header">
           {{pageData.title}}
        </div>
        <div class="tip">
            {{pageData.tip}}
        </div>
         <van-cell-group>
        <van-field
            v-model="value"
            clearable
            label=""
            :placeholder="pageData.label"
            class="input"
            maxlength="10"
        >
        <template #left-icon>
           <van-image
            width="1.5rem"
            height="1.5rem"
            radius=".2rem"
            fit="cover"
            :src="pageData.avatar"
            style="marginRight:.5rem;marginTop:.2rem;"
            />
        </template>
        </van-field>
        </van-cell-group>
        <div class="remarks" v-if="pageData.setRemark">
            <span>群聊名称:</span>
            <span>{{pageData.groupName}}</span>
            <span @click="trueName(pageData.groupName)">填入</span>
        </div>
        <van-button type="primary" class="button" :disabled='disabled' @click="finishChange">完成</van-button>
    </div>
</template>
<script>
import pageHeader from '../common/pageHeader';
import {Meteor} from 'meteor/meteor';
import { group, groupUser,image,user } from '../../../api/collections/index';
export default {
     meteor: {
    $subscribe: {
      'userInf': []
    },
    groupInf(){
        const gInf = group.findOne({_id:this.groupId})
        if(gInf){
            const avatar = image.findOne({_id:gInf.g_avatarId})
            gInf.avatar = avatar.base64
        }
        return gInf  
    },
    groupUserInf(){
        const userInf = user.findOne({_id:this.id})
        const gUserInf = groupUser.findOne({gid:this.groupId,userId:this.id})
        if(userInf&&gUserInf){
            gUserInf.name = userInf.nickname
        }
        return gUserInf
    },
    },
    data(){
        return{
            value:'',
            pageData:{
                title:'',
                tip:'',
                label:'',
                remarks:false,
            },
            groupId:this.$route.params.id,
                type:this.$route.params.type,
                id:sessionStorage.getItem('user')
        }
    },
    watch:{
        groupInf(){
    switch(this.type){
    case "changeGroupName":
        this.pageData.title="修改群聊名称"
        this.pageData.tip="修改群聊名称后，将在去群内通知其他成员。"
        if(this.groupInf){
            this.value = this.groupInf.g_name
            this.pageData.groupName = this.groupInf.g_name
            this.pageData.avatar = this.groupInf.avatar
        }
        break;
    case "changeGroupRemarks":
        this.pageData.title="备注"
        this.pageData.tip="群聊备注仅自己可见"
        if(this.groupInf){
            this.pageData.groupName = this.groupInf.g_name
                this.pageData.avatar = this.groupInf.avatar
        }
        if(this.groupUserInf){
            this.value = this.groupUserInf.groupRemark?this.groupUserInf.groupRemark:""
            this.pageData.remark = this.value
        }
        this.pageData.setRemark = true
        break;
    case "changeGroupNickname":
        this.pageData.title="我在群里的昵称"
        this.pageData.tip="昵称修改后，只会在此群显示，群内成员都可以看见。"
        if(this.groupUserInf){
            this.value = this.groupUserInf.groupName?this.groupUserInf.groupName:this.groupUserInf.name
            this.pageData.name = this.value
            this.pageData.groupName = this.groupInf.g_name
        }
        if(this.groupInf){
            this.pageData.avatar = this.groupInf.avatar
        }
        break;
    default:break;
}
        }
    },
    computed:{
        disabled(){
        switch(this.type){
    case "changeGroupName":
       if(this.value !== this.pageData.groupName){
           return false
       }
       else{
           return true
       }
        break;
    case "changeGroupRemarks":
         if(this.value !== this.pageData.remark){
           return false
       }
       else{
           return true
       }
        break;
    case "changeGroupNickname":
         if(this.value !== this.pageData.name){
           return false
       }
       else{
           return true
       }
        break;
    default:break;
}
        }
    },
    methods:{
        toLastPage(){
            this.$router.go(-1)
        },
        trueName(e){
            this.value = e
        },
        finishChange(){
        switch(this.type){
        case "changeGroupName":
            Meteor.call('group.updateName',{
                id:this.groupId,
                name:this.value
            },(err,res)=>{
                if(err){
                    this.$toast(err.error)
                }else{
                    this.$toast.success('修改成功')
                    this.$router.go(-1)
                }
            })
            break;
        case "changeGroupRemarks":
            if(this.value == this.pageData.groupName){
               Meteor.call('groupUser.updateRemark',{
                gid:this.groupId,
                uid:this.id,
                remark:''
            },(err,res)=>{
                if(err){
                    this.$toast(err.error)
                }else{
                    this.$toast.success('修改成功')
                    this.$router.go(-1)
                }
            }) 
            }else{
                Meteor.call('groupUser.updateRemark',{
                gid:this.groupId,
                uid:this.id,
                remark:this.value
            },(err,res)=>{
                if(err){
                    this.$toast(err.error)
                }else{
                    this.$toast.success('修改成功')
                    this.$router.go(-1)
                }
            })
            }   
        break;
        case "changeGroupNickname":
         Meteor.call('groupUser.updateNick',{
                gid:this.groupId,
                uid:this.id,
                name:this.value
            },(err,res)=>{
                if(err){
                    this.$toast(err)
                }else{
                    this.$toast.success('修改成功')
                    this.$router.go(-1)
                }
            })
            break;
        default:break;
        }
        }
    },
    components:{
        pageHeader
    }
}
</script>
<style scoped>
.alterPage{
    height: 100vh;
    background-color: #fff;
    padding: 0 .4rem;
}
.header{
    padding-top: 3rem;
    text-align: center;
    font-weight: 700;
    font-size: .8rem;
}
.tip{
    font-size: .6rem;
    padding: .6rem 1rem;
    text-align: center;
}
.van-button{
    width: 7rem;
    height: 1.5rem;
    transform: translateX(-50%);
    left: 50%;
    top: 2rem;
}
.remarks span{
    margin-right: .1rem;
    font-size: .4rem;
    color: #979797;
}
.remarks span:last-child{
    color: #23AAF2;
}
.van-cell{
    padding: .2rem .1rem 0;
}
.input{
    line-height: 1.7rem;
}
</style>